<template>
	<view class="order-list" :class="themeName">
		<!-- Tabs -->
		<navbar title="订单列表"></navbar>
		<u-tabs
		  :list="tabsList" 
		  :is-scroll="false" 
		  :height="80"
		  :active-color="themeColor"
		  :bar-style="{top: '100%'}"
		  :current="tabsIndex" 
		  @change="changeCurrentTab"
		/>
		
		<!-- Order Lists -->
		<view class="order-item">
			<mescroll-uni
			   ref="mescrollRef"
			  :fixed="false"
			  :up="{
				  auto: false,
				  noMoreSize: 3,
				  empty: {
				  	icon: '/static/images/empty/order.png',
				  	tip: '暂无订单~',
				  	fixed: true
				  }
			  }"
			  :down="{ auto: false }"
			  @init="mescrollInit" 
			  @down="downCallback" 
			  @up="upCallback"
			>
				<block  v-for="(tabItem, tabIndex) in tabsList" :key="tabItem['sign']">
					<view class="order-contain" v-if="currentTab['sign'] === tabItem['sign']">
						<view
						  class="order"
						  v-for="orderItem in tabsList[tabIndex].list" 
						  :key="orderItem.id"
						>
							<!-- Order Header -->
							<view class="order-header">
								
								<!-- S 订单Tag -->
								<template v-if="orderItem.delivery_type === 2">
									<view class="order-tag order-tag--green">自提</view>
								</template>
								<template v-if="[1,2,3].includes(orderItem.order_type)">
									<view :class="[
											'order-tag',
											`order-tag--${orderType[orderItem.order_type]['style']}`
										]"
									>{{ orderType[orderItem.order_type]['name'] }}</view>
								</template>
								<!-- E 订单Tag -->
								
								<view class="order-sn">订单编号:{{ orderItem.sn }}</view>
								<template v-if="orderItem.delivery_type === 1 || orderItem.delivery_type === 4">
									<view :class="[
											'order-status', 
											`order-status--${orderStatus[orderItem.order_status]['style']}`
										]"
									>{{ orderStatus[orderItem.order_status]['name'] }} </view>								
								</template>
								<template v-else-if="orderItem.delivery_type === 2">
									<view :class="[
											'order-status', 
											`order-status--${orderSelffetchStatus[orderItem.order_status]['style']}`
										]"
									>{{ orderSelffetchStatus[orderItem.order_status]['name'] }}</view>	
								</template>
							</view>
							
							<!-- Order Main -->
							<view class="order-main" @tap="goOrderDetail(orderItem.id)">
								<goods-card
									v-for="(goodsItem, goodsIndex) in orderItem.order_goods"
									:key="goodsIndex"
									shape="rectangle"
									:name="goodsItem.goods_name" 
									:image="goodsItem.goods_image" 
									:contain-style="{ 'border-raius': 0, 'height': '230rpx' }"
									:image-style="{ 'width': '180rpx', 'height': '180rpx' }"
								> 
									<view class="flex-1" slot="default">
										<text class="muted xs m-t-10">{{ goodsItem.spec_value_str }}</text>
										<view class="m-t-10 flex row-between">
											<price v-if="orderItem.order_type == 0 || orderItem.order_type == 4" :content="goodsItem.original_price" mainSize="32rpx" minorSize="24rpx"/>
											<price v-else :content="goodsItem.goods_price" mainSize="32rpx" minorSize="24rpx"/>
											<text class="lighter sm">x{{ goodsItem.goods_num }}</text>
										</view>
									</view>
								</goods-card>
								<view class="order-desc">
									<text>共{{ orderItem.total_num }}件商品,应付款:</text>
									<price class="normal lg" :content="orderItem.order_amount" />
								</view>
							</view>
							
							<!-- Order Footer -->
							<view class="order-footer" v-if="orderItem.buttons.length">
								<block v-for="buttonItem in orderItem.buttons" :key="buttonItem.event">
									<view :class="[
										'order-button', 
										`order-button--${buttonItem.style}`
										]"
										@tap="onOrderButtons(buttonItem['event'], orderItem.id)"
									>{{ buttonItem.name }}</view>
								</block>
							</view>
						</view>
					</view>
				</block>
			</mescroll-uni>
		</view>
	</view>
</template>


<script>
	import { apiOrderList } from '@/api/order'
	import OrderMixin from '@/mixins/order'
	import { PaymentStatusEnum } from '@/utils/enum'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default {
		name: 'OrderList',
		mixins: [OrderMixin, MescrollMixin],
		
		data() {
			return {
				// Tabs列表
				tabsList: [{
					sign: 'all',
					name: '全部',
					list: [],
				}, {
					sign: 'pay',
					name: '待付款',
					list: [],	
				}, {
					sign: 'delivery',
					name: '待发货',
					list: [],	
				},{
					sign: 'take',
					name: '待收货',
					list: [],	
				},{
					sign: 'finish',
					name: '已完成',
					list: [],	
				},{
					sign: 'close',
					name: '已关闭',
					list: [],	
				}],
				tabsIndex: '',			// Tabs索引
				
				// 订单状态
				orderStatus: {
					0: {
						name: '待付款',
						style: 'primary',
					},
					1: {
						name: '待发货',
						style: 'primary',
					},
					2: {
						name: '待收货',
						style: 'primary',
					},
					3: {
						name: '已完成',
						style: 'primary',
					},
					4: {
						name: '已关闭',
						style: 'muted',
					}
				},
				
				// 订单状态
				orderSelffetchStatus: {
					0: {
						name: '待付款',
						style: 'primary',
					},
					1: {
						name: '待取货',
						style: 'primary',
					},
					3: {
						name: '已完成',
						style: 'primary',
					},
					4: {
						name: '已关闭',
						style: 'muted',
					}
				},
				
				// 订单类型
				orderType: {
					1: {
						name: '拼团',
						style: 'pink'
					},
					2: {
						name: '秒杀',
						style: 'red'
					},
					3: {
						name: '砍价',
						style: 'blue'
					},
				}
			}
		},
		
		computed: {
			// 当前Tab项
			currentTab() {
				return this.tabsList[this.tabsIndex] || {}
			},
			
			// 映射Tabs项
			mapTabsItem() {
				return sign => this.tabsList.find(item => item['sign'] === sign)
			}
		},
		
		methods: {
			// 更改当前Tab页
			changeCurrentTab(index) {
				this.tabsIndex = index
				this.refreshOrderData()
			},
			
			// 刷新订单数据 @Mixins【/src/mixins/order.js】内调用，请勿删除
			refreshOrderData() {
				this.$nextTick(() => {
					this.mescroll.resetUpScroll()
				})
			},
		
			// 上拉加载更多
			upCallback({ num, size }) {
				const sign = this.currentTab.sign
				apiOrderList({
					type: sign,
					page_no: num,
					page_size: size,
				}).then(({ lists, page_size, count }) => {
					const tab = this.mapTabsItem(sign)
					lists.forEach(item => item['buttons'] = this.getOrderStatusButtons(item.btn) ?? [])
					if (num === 1) tab.list = []
					tab.list = [...tab.list, ...lists]
					this.mescroll.endSuccess(lists.length, count)
				}).catch(err => {
					this.mescroll.endErr()
				})
			},
			
			// 去订单详情
			goOrderDetail(id) {
				this.$Router.push({
					path: '/pages/order_detail/order_detail',
					query: { order_id: id }
				})
			},
		},
		
		onLoad() {
			const options = this.$Route.query
			const mode = options.mode ?? 'all'
			const tabIndex = this.tabsList.findIndex(item => item['sign'] === mode)
			
			this.changeCurrentTab(tabIndex)
			setTimeout(() => {
			}, 0.5 * 1000)
			
			// 监听全局duringPayment事件
			uni.$on('duringPayment', ({ result }) => {
				if (result === PaymentStatusEnum['SUCCESS']) {
					this.$Router.back()
					setTimeout(() => {
						this.$toast({ title: '支付成功' })
					}, 0.5 * 1000)
					this.refreshOrderData()
				}
			})
		},
		onUnload() {
			uni.$off('duringPayment')
		},
	}
</script>


<style lang="scss">
	page {
		height: 100%;
		padding: 0;
	}
	.order-list {
		height: 100%;
		display: flex;
		flex-direction: column;
		.order-item {
			flex: 1;
			min-height: 0;
		}
	}
	.order-contain {
		padding: 0 20rpx;
	}
	
	.order {
		padding-left: 20rpx;
		margin-top: 20rpx;
		border-radius: 5px;
		background-color: #FFFFFF;
		
		&-header {
			display: flex;
			height: 80rpx;
			align-items: center;
			padding-right: 20rpx;
			border-bottom: $-solid-border;
			
			.order-tag {
				padding: 4rpx 10rpx;
				margin-right: 10rpx;
				border-radius: 2px;
				font-size: $-font-size-xxs;
				color: #FFFFFF;
				
				&--pink {
					background: linear-gradient(#ff369a 0%, #ff2c3c 100%);
				}
				
				&--red {
					background: linear-gradient(#f95f2f 0%, #ff2c3c 100%);
				}
				
				&--blue {
					background: linear-gradient(#fa6aa9 0%, #fc00bb 100%);
				}
				
				&--green {
					background: linear-gradient(#0cc21e 0%, #06c160 100%);
				}
			}
			
			.order-sn {
				font-size: $-font-size-nr;
			}
			
			.order-status {
				margin-left: auto;
				font-size: $-font-size-sm;
				
				&--primary {
					@include font_color()
				}
				
				&--muted {
					color: $-color-muted;
				}
			}
		}
		
		&-main {
			.order-desc {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding: 20rpx;
				font-size: $-font-size-xs;
				color: $-color-muted;
			}
		}
		
		&-footer {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100rpx;
			padding-right: 20rpx;
			border-top: $-solid-border;
			
			.order-button {
				box-sizing: border-box;
				padding: 10rpx 30rpx;
				border-radius: 60px;
				font-size: $-font-size-nr;
				
				&:nth-child(n+2) {
					margin-left: 20rpx;
				}
				
				&--primary {
					@include background_color()
					color: #FFFFFF;
				}
				
				&--normal {
					border-width: 1px;
					border-style: solid;
					@include border_color()
					@include font_color()
				}
				
				&--muted {
					border: $-solid-border;
					color: $-color-lighter;
				}
			}
		}
		
	}
</style>
